<template>
  <el-dialog
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    title="添加预警规则"
    width="650px"
  >
    <el-form
      ref="addEditRef"
      :model="modelValue.form"
      :rules="modelValue.rules"
      label-width="100px"
      label-position="right"
      style="margin-top: 12px"
    >
      <el-form-item label="规则编码" prop="number">
        <el-input
          v-model="modelValue.form.number"
          placeholder="请输入规则编号"
          maxlength="64"
          show-word-limit
        ></el-input>
      </el-form-item>

      <el-form-item label="规则名称" prop="name">
        <el-input
          v-model="modelValue.form.name"
          placeholder="请输入规则名称"
          maxlength="64"
          show-word-limit
        ></el-input>
        <div class="example-text">
          例如：当物料保质期还剩30分钟时,每隔10分钟提醒一次
        </div>
      </el-form-item>

      <el-form-item label="预警类型" prop="type">
        <el-radio-group v-model="modelValue.form.type">
          <el-radio label="1">报废预警</el-radio>
          <el-radio label="2">清洗预警</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="规则设置" prop="ruleSettingType">
        <el-radio-group v-model="modelValue.form.ruleSettingType">
          <div>
            <el-radio label="percentage">
              <span style="margin-right: 12px">当物料保质期还剩</span>
              <el-input-number
                v-model="modelValue.form.threshold_1"
                :min="1"
              ></el-input-number>
              <span style="color: #333; margin-left: 12px">%时间提醒</span>
            </el-radio>
          </div>
          <div>
            <div>
              <el-radio label="time">
                <span style="margin-right: 12px">当物料保质期还剩</span>
                <el-input-number
                  v-model="modelValue.form.threshold_2"
                  :min="1"
                ></el-input-number>
                <span style="color: #333; margin-left: 12px"> 分钟提醒 </span>
              </el-radio>
            </div>
          </div>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="提醒时间" prop="c">
        <div class="interval-setting">
          <span style="margin-right: 12px">每隔</span>
          <el-input-number
            v-model="modelValue.form.remindInterval"
            :min="1"
          ></el-input-number>
          <span style="margin-left: 12px">分钟 提醒一次</span>
        </div>
      </el-form-item>

      <el-form-item label="提醒设备" prop="remindDevice">
        <el-checkbox v-model="modelValue.form.remindDevice" label="screen"
          >设备屏幕</el-checkbox
        >
      </el-form-item>

      <el-form-item label="提醒方式" prop="warnType">
        <el-checkbox v-model="modelValue.form.warnType" label="sound"
          >叮咚声音提示</el-checkbox
        >
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="modelValue.form.remark"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          maxlength="255"
          show-word-limit
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ensure"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import {
  addFdsEarlywarningRuleset,
  updateFdsEarlywarningRuleset,
} from '@/api/fds-earlywarning-ruleset.api'
const dialogVisible = ref(true)

const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()

const formRules = reactive({
  ruleCode: [{ required: true, message: '请输入规则编码', trigger: 'blur' }],
  ruleName: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
  alertType: [{ required: true, message: '请选择预警类型', trigger: 'change' }],
  ruleSettingType: [
    { required: true, message: '请选择规则设置类型', trigger: 'change' },
  ],
  reminderInterval: [
    { required: true, message: '请输入提醒间隔', trigger: 'blur' },
  ],
  reminderDevices: [
    { required: true, message: '请选择提醒设备', trigger: 'change' },
  ],
  reminderMethods: [
    { required: true, message: '请选择提醒方式', trigger: 'change' },
  ],
})

const cancel = () => {
  props.modelValue.visible = false
}

const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    number: form.number,
    name: form.name,
    type: form.type,
    enabled: '1',
    ruleSettingType: form.ruleSettingType,
    remindType: form.remindType,
    remindInterval: form.remindInterval,
    remindDevice: form.remindDevice,
    threshold: '',
  }

  if (form.warnType) {
    formData.remindDevice = 1
  } else {
    formData.remindDevice = 0
  }

  if (form.remindDevice) {
    formData.remindDevice = 1
  } else {
    formData.remindDevice = 0
  }

  if (form.ruleSettingType == 'percentage') {
    formData.threshold = form.threshold_1
  } else {
    formData.threshold = form.threshold_2
  }

  console.log('addEditRef.value: ', addEditRef.value)
  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateFdsEarlywarningRuleset({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addFdsEarlywarningRuleset(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}
</script>

<style scoped>
.example-text {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.rule-setting {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.rule-setting .el-input-number {
  width: 80px;
  margin-right: 10px;
}

.unit-select {
  width: 80px;
  margin-right: 10px;
}

.setting-text {
  font-size: 14px;
}

.interval-setting {
  display: flex;
  align-items: center;
}

.interval-setting span {
  margin: 0 5px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
